This easy lesson will teach you how to name objects in your web page and use the CSS properties to control how they appear on the page.
Up to now, when we have used CSS rules, we have usually used them to modify the appearance of one of the standard HTML tags, such as <p> or <h1>.
However, you can also target your CSS rules at a specific object on your web page.
Let's say for example, that you have created a nice H1 style that you like, which sets color-black, font-family=arial, size=18.
Now, you have a spot where you would like to set the H1 to be blue. How can we do this? By naming the object you want blue, and then applying the rule to that named object. The name is indicated by using the "id=" option. You can use the ID option in any html tag.
As an example, here's an object definition I'm going to use in my web page:
<h1>This ought to be blue</h1>
It will look like this:
Let's name the h1 tag is "mytitle". You do it by adding the id option like this:
<h1 id=mytitle>This ought to be blue</h1>
So now we have to create a rule that applies to this id. This is done by creating a rule but instead of indicating "p" or "h1" as the target of the rule, indicate "#mytitle". Note that we are going to start this with a pound sign (#). This is important.
Here's the contents of the stylesheet file mytitlestylesheet.css
#mytitle {
color:#03F;
}
Now our h1 tag looks like this:
Excellent. Our h1is now blue, but the other h1 tags in the page are still black.
A bit of explanation: When the system sees an object with an id="mytitle" it looks for a css rule that matches, and starts with a pound sign (#) as shown above. Strictly speaking when you use the ID tag there should be only one object with that ID, but in reality I think the system is not too fussy about this. Later on when you do javascript or other programming you could get into trouble if you have multiple objects with the same ID but for HTML it doesn't make much difference.
You may notice that there are two stylesheets on this page (the one you are reading now). Both of them have definitions for h1. How does the system combine them? Which rule is more important?
The answer is that the rules are simply executed in order. If the first stylesheet says H1 is black, and the second one says H1 is blue, both will execute but the second one is the one that sets the final color since it is executed last. That's what you are seeing above.
We are going to create a rainbow menu.
Make a copy of your project5. If you have not already done so, please do it with the menus that are converted from list items, as explained here: Creating rollover text menu (w3schools). If you have trouble getting that to work, copy the example I did which is saved under the student projects as project5.
Now, modify the page template and the CSS files so that each element of the menu is a different color. This will be a bit of a challenge and a puzzle since it's advanced use of CSS rules.
This is what the final result looks like.
The CSS file sets different colors for the menu when the mouse is over it or not. These colors are generated by the "a" tags. Usually the browser sees an "A" tag it means display the text with a blue underline. We redefined it so that that the "A" tag has a green box. This box gets lighter or darker depending on whether the mouse is over it or not.
Now we will use the "ID" tags to make a rainbow menu.
Give each of the "A" tags defining our links, a name, like this theoretical example:
<a href="mypage.html" id="redtag">
Now go into the CSS stylesheet and create new rules for each of the ID's.
Before we start on this, however, I want to point out a problem in the w3schools code, and a fix.
They redefine the "A" tags to turn them into rollever menu buttons. The problem is that this redefinition happens for any "A" tag in your page. When I did this the font was set to white in the menu buttons, this meant that any links in my page were also white, which made them invisible. Not good.
I fixed this by doing what's called nested tag.
The w3schools section on CSS gives details on how to nest tags. Have a look at
http://w3schools.com/css/css_grouping_nesting.asp for a detailed explanation.
I gave my list a name by calling it id="menu". Then I modified the CSS commands that redefine the a tag, as follows:
#menu a:link,#menu a:visited
{
display:block;
etc etc
}
What this means is, when we are inside a tag called "#menu", the a:linki and a:visited tags will be redefined. It might be a little confusing but it works.
Then I redefined the various up and down colors for the buttons like this:
#home a:link,#home a:visited
{
background-color:grey;
}
This means: for a tag with id="home", if it contains an "A" tag, and it's either a live link, or a visited link, make the background grey.
I have included all the CSS commands as part of the sample HTML file. You could put them in a separate CSS file if you wanted.